<template>
    <h2>修改页面</h2>
    <table class="table table-bordered">
        <tbody>
            <tr>
                <td>图片</td>
                <td>
                    <img :src="form.tuPian" style="display: '';max-width: 100px;max-height: 100px">
                    <input type="file" style="display: '';" id="file" @change="Tupian">
                </td>
            </tr>
            <tr>
                <td>名称</td>
                <td>
                    <input type="text" v-model="form.name">
                </td>
            </tr>
            <tr>
                <td>用户名</td>
                <td>
                    <input type="text" v-model="form.userName">
                </td>
            </tr>
            <tr>
                <td>密码</td>
                <td>
                    <input type="password" v-model="form.pwd">
                </td>
            </tr>
             <tr>
                <td>会员等级</td>
                <td>
                    <select v-model="form.huiYuanDj">
                        <option>黄金会员</option>
                        <option>白银会员</option>
                        <option>钻石会员</option>
                    </select>
                </td>
            </tr>
             <tr>
                <td>生日</td>
                <td>
                    <input type="date" v-model="form.shengre">
                </td>
            </tr>
             <tr>
                <td>电话</td>
                <td>
                    <input type="text" v-model="form.phone">
                </td>
            </tr>
             <tr>
                <td>金额</td>
                <td>
                    <input type="text" v-model="form.money">
                </td>
            </tr>
             <tr>
                <td>时间</td>
                <td>
                    <input type="date" v-model="form.date">
                </td>
            </tr>
             <tr>
                <td>费用</td>
                <td>
                    <input type="text" v-model="form.feiYong">
                </td>
            </tr>
             <tr>
                <td>累计</td>
                <td>
                    <input type="text" v-model="form.leiji">
                </td>
            </tr>
             <tr>
                <td>备注</td>
                <td>
                    <input type="text" v-model="form.beizhu">
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <button class="btn btn-primary" @click="Add">修改</button>
                </td>
            </tr>
        </tbody>
    </table>
</template>
<script setup lang="ts">
//引入组件
import { ref, reactive, onMounted } from "vue"
//bootstrap样式
import "bootstrap/dist/css/bootstrap.min.css"
//访问后端
import axios from "axios"
//路由(1)
import { useRouter,useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();

const form = reactive({
    id: 0,
    tuPian:"",
    name: "",
    userName: "",
    pwd: "",
    huiYuanDj: "",
    shengre: "",
    phone: "",
    money: "",
    date: "",
    feiYong: "",
    leiji: "",
    beizhu: ""
})
const Add = () => {
    if (!form.name) {
        alert("名称不能为空！")
        return;
    }
    if (!form.userName) {
        alert("用户名不能为空！")
        return;
    }
    if (!form.pwd) {
        alert("密码不能为空！")
        return;
    }
    axios.put("http://localhost:5145/api/Huiyuan/Update", form).then(res => {
        if (res.data > 0) {
            alert("修改成功！！");
            router.push("/huiyuanShow")
        }
        else {
            alert("修改失败！！！");
        }
    })
}
//图片上传
const Tupian = (e: any) => {
    //定义菜单
    var formData = new FormData();
    //上传的文件信息
    var file = e.target.files[0];

    formData.append("file", file)

    axios.post("http://localhost:5145/api/Huiyuan/Pic", formData).then(res => {
        form.tuPian = res.data;
    }).catch(err => {
        console.log(err)
    })
    
}

console.log(route.query.id);

//反添
const Fantian = () => {
    axios.get("http://localhost:5145/api/Huiyuan/GetHuiyuan?id=" + route.query.id).then(res => {
        console.log(res);
        
        let d = res.data;
        form.id = d.id;
        form.tuPian = d.tuPian;
        form.name = d.name;
        form.userName = d.userName;
        form.pwd = d.pwd;
        form.huiYuanDj = d.huiYuanDj;
        form.shengre = d.shengre;
        form.phone = d.phone;
        form.money = d.money;
        form.date = d.date;
        form.leiji = d.leiji;
        form.feiYong = d.feiYong;
        form.beizhu = d.beizhu;
    })
} 
//钩子函数
onMounted(() => {
    Fantian();
})
</script>